icon-size = 32px
icon-gap = 25px

article
  box-shadow: 0 1px 2px #BBB
  background #fff
  strong
    font-weight bolder
  &.page
    padding-left 20px
    .icon
      display none

  &.post
    .icon
      &:before
        content '\f016'

  &.photo
    .icon
      &:before
        content '\f030'

  &.link
    .icon
      &:before
        content '\f0c1'

    .title
      a
        &:after
          content '\f08e'
          color color-meta
          font 12px font-icon
          padding-left 10px
          vertical-align super

  .post-content
    padding 20px (icon-size + icon-gap + 20) 15px (icon-size + icon-gap + 20)
    margin-bottom 50px
    position relative
    @media screen and (max-width: 600px)
      padding-left 20px

  .post-content:before
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20px;
    -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
	
  .post-content:after
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20px;
    -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
    right: 10px;
    left: auto;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);


  .gallery
    overflow hidden
    position relative
    &:hover
      .control
        opacity 1

    img
      min-width 100%
      max-width 100%
      height auto
      position absolute
      top 0
      left 0
      opacity 0

    .control
      opacity 0
      transition 0.3s

    .prev, .next
      position absolute
      top 0
      width 50%
      height 100%
      cursor pointer
      &:before
        position absolute
        font 24px/1 font-icon
        text-align center
        width 24px
        text-shadow 0 0 15px rgba(0,0,0,0.5)
        color #fff
        margin-top -12px
        top 50%

    .prev
      left 0
      &:before
        content '\f053'
        left 10px

    .next
      right 0
      &:before
        content '\f054'
        right 10px

  header
    .icon
      width icon-size
      height icon-size
      margin-right icon-gap
      position absolute
      top 20px
      left 20px
      color color-link
      @media screen and (max-width: 600px)
        display none
      &:before
        position absolute
        font 32px font-icon    
        top 0
        left 0 
        width 32px
        text-align center

    time
      color color-meta
      font 0.9em font-title
      margin-bottom 5px
      display block
      line-height 1

    .title
      font-weight normal
      a
        color color-font
        &:hover
          color color-link
          text-decoration none

  .entry
    text-align justify
    line-height 1.6
    p, blockquote, ul, ol, dl, table, iframe, h3, h4, h5, h6, .video-container
      margin-top 15px

    blockquote
      background #f6f6f6
      //border-top 1px solid color-border
      //border-bottom 1px solid color-border
      border-left 4px solid #999999
      font-style normal
      font-family font-quote
      //font-family font-quote
      font-size 1.2em
      padding 0 30px 15px
      padding-top 10px
      padding-bottom 30px
      //text-align center
      footer
        border-top none
        font-size 0.8em
        line-height 1
        margin 20px 0 0
        padding-top 0
        cite
          &:before
            content '—'
            color #ccc
            padding 0 0.5em

    code, pre
      font-family font-mono

    code
      background #FBEDEB
      color #E2678F
      padding 0 5px
      margin 0 2px
      font-size 0.9em
      border-radius 3px

    pre
      background #eee
      border 1px solid color-border
      margin-top 15px
      overflow auto
      padding 7px 15px
      border-radius 2px
      code
        background none
        padding 0
        color rgb(102, 102, 102)
        margin 0
        border none
        border-radius 0

    ul, ol, dl
      margin-left 20px
      ul, ol, dl
        margin-top 0

    h1, h2
      font-weight bold
      padding-bottom 10px
      margin-top 20px

    h3, h4, h5, h6
      font-weight bold

    img, video
      max-width 100%
      height auto
      border none

    iframe
      border none

    .caption
      display block
      margin-top 5px
      color color-meta
      position relative
      font-size 0.9em
      padding-left 25px
      &:before
        content '\f040'
        position absolute
        font 1.3em font-icon
        position absolute
        left 0
        top 3px

    .video-container
      position relative
      padding-bottom 56.25%
      padding-top 30px
      height 0
      overflow hidden
      iframe, object, embed
        position absolute
        top 0
        left 0
        width 100%
        height 100%
        margin-top 0

    .pullquote
      float right
      border none
      padding 0
      margin 1em 0 0.5em 1.5em
      text-align left
      width 45%
      font-size 1.5em

  footer
    margin-top 15px
    padding-top 10px
    border-top 1px solid color-border
    color color-meta
    font-size 0.9em
    line-height 16px
    position relative
    min-height 16px
    a
      color color-meta
      &:hover
        color color-link
        text-decoration none
      &:before
        font 1.1em font-icon
        padding-right 10px
        vertical-align middle

      &.more-link
        &:before
          content '\f054'

      &.comment-link
        &:before
          content '\f075'

    .categories, .tags
      position relative
      padding-left 25px
      margin 5px 0
      &:before
        position absolute
        font 1.1em font-icon

    .categories
      &:before
        content '\f07b'
        top 2px
        left 1px

    .tags
      &:before
        content '\f02b'
        top 3px
        left 2px

    .addthis
      margin-top 15px
      iframe
        margin-top 0

